<template>
	<view class="wrapper">
	  <view class="handCenter">
  		<canvas class="handWriting" disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove"
  		  @touchend="uploadScaleEnd" canvas-id="handWriting">
  		</canvas>
	  </view>
		<view class="buttons">
			<view class="left box-bg" @click.stop="subCanvas">完成</view>
      <view class="right box-bg" @click.stop="retDraw">清除</view>
		</view>
	</view>
</template>

<script>
import Handwriting from "./js/signature.js"
export default {
	data(){
		return{
			lineColor:'black',
			slideValue:50,
			handwriting:'',
			selectColor:'black',
			color_black: require('./img/color_black.png'),
			color_black_selected: require('./img/color_black_selected.png'),
			color_red: require('./img/color_red.png'),
			color_red_selected: require('./img/color_red_selected.png'),
			color:'',
			showimg:'',
			share_popup:false,
			noSave: true
		}
	},
	// onBackPress(e){
	// 	console.log(e);
	// 	this.closePop()
	// 	return true;
	// },
	mounted() {
      this.handwriting = new Handwriting({
        lineColor: this.lineColor,
        slideValue: this.slideValue, // 0, 25, 50, 75, 100
        canvasName: 'handWriting',
      })
	},
	beforeMount() {
    // #ifdef APP-PLUS
	    plus.screen.lockOrientation('landscape-primary');
    // #endif
	},
	beforeDestroy() {
	    this.closePop()
	},
	methods:{
		closePop(){      
      // #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary');
      // #endif
			this.$emit('closePop',false)
		},
	 // 选择画笔颜色
	  selectColorEvent(event) {
		  this.selectColor = event;
		if(event=='black'){
			this.color= '#1A1A1A'
		}else if(event=='red'){
			this.color= '#ca262a'
		} 
		this.handwriting.selectColorEvent(this.color)
	  },
	  retDraw() {
		this.handwriting.retDraw()
	  },
	  // 笔迹粗细滑块
	  updateValue(e) {
		  console.log(e.detail);
		  this.slideValue = e.detail.value;
		this.handwriting.selectSlideValue(this.slideValue);
	  },
	  uploadScaleStart(event){
		  this.handwriting.uploadScaleStart(event)
	  },
	  uploadScaleMove(event){
		  this.noSave = false
		  this.handwriting.uploadScaleMove(event)
	  },
	  uploadScaleEnd(event){
		  this.handwriting.uploadScaleEnd(event)
	  },
	  subCanvas(){
		  this.handwriting.saveCanvas().then(res=>{
			  this.showimg = res;
			  this.closePop()
			  this.$emit('uploadFn',res)
		  }).catch(err=>{
			  console.log(err);
		  });	
      // var that = this;               
      // uni.canvasToTempFilePath({
      //     canvasId: 'handWriting',
      //     success: function(res) {
      //       let path = res.tempFilePath;
      //       that.$emit('uploadFn',path)
      //     },
      //     fail: function(res) {
      //         console.log(res)
      //         alert('生成图片失败' + res)
      //     },
      // },that)	  
		  
	  },
	}
}
</script>

<style scoped lang="scss">
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  font-size: 28upx;
  .handCenter {
    border: 4upx dashed #e9e9e9;
    flex: 5;
    overflow: hidden;
    box-sizing: border-box;
    width: 90%;
    height: calc(100% - 20px);
    margin: 0 auto;
  }
}

.handWriting {
  background: #fff;
  width: 100%;
  height: 100%;
}

.handRight {
  align-items: center;
}


.buttons{
  position: fixed;
  bottom: 0;
  left: 0;
	width: 100%;
	display: flex;
  justify-content: space-around;
  .box-bg{
      background: #38C79D;
      color: #fff;
      padding: 0 10px;
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      border-radius: 3px;
      &.right{
        background: #f4f4f5;
        color: #82848a;
        margin-left: 20rpx;
      }
    }
}
</style>
